<template>
    <div>
        <van-swipe @change="onChange" ref="van_swiper">
            <van-swipe-item class="good-img-item" v-for="(i,index) in imgs" @click="click_show(index)">
                <van-image fit="contain" :src="i" />
            </van-swipe-item>

            <template #indicator>
                <div class="custom-indicator">{{ current + 1 }}/4</div>
            </template>
        </van-swipe>

        <div class="info-div">
            <h1 class="h1-title">
                {{query.name}}
            </h1>
            <table class="table-params">
                <tr>
                    <td><span>总数:</span> <span>{{count}}</span></td>
                    <td><span>计量单位:</span> <span>{{goods[0]['计量单位']}}</span></td>
                </tr>
                <tr>
                    <td><span> 规格:</span> <span> {{goods[0]['规格']?goods[0]['规格']:"- -"}}</span></td>
                    <td><span> 应对灾害种类:</span> <span> {{goods[0]['应对灾害种类']}}</span></td>
                </tr>
            </table>
        </div>

        <h2>各存储点数量</h2>
        <div class="card-group">
            <div class="card-item" v-for="(item,index) in shops">
                <p class="title-aa">名称:{{item['储备库名称']}}</p>
                <p>数量:{{item['数量']}}({{item['计量单位']}})</p>
                <p>{{item['道路名称及门牌号码']}}</p>
                <p>联系电话:</p>
                <table class="phone-table">
                    <tr>
                        <td>{{item['联系电话']}}</td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>


    </div>
</template>
<script>
    import { ImagePreview } from 'vant';
    import { Lazyload } from 'vant';
    import { goodsData, reserve } from '@/tempData/物资.js'
    import goodsList from '@/tempData/物资总记录.js'
    export default {
        data() {
            let count = 0;
            let shops = [];
            const goods = goodsList.filter((item) => {
                if (item['物资名称'] == this.$route.query.name) {
                    count += item['数量']
                    shops.push(item);
                    return true
                }
                return false
            });
            return {
                goodsData, reserve, goodsList, goods, count, shops,
                query: Object.assign({ name: '' }, this.$route.query), current: 0,
                imgs: ['https://img01.yzcdn.cn/vant/apple-1.jpg',
                    'https://img01.yzcdn.cn/vant/apple-2.jpg',
                    'https://img01.yzcdn.cn/vant/apple-3.jpg',
                    'https://img01.yzcdn.cn/vant/apple-4.jpg']
            }
        },
        methods: {
            onChange(index) {
                this.current = index;
            },
            click_show(index) {

                ImagePreview({
                    images: this.imgs, startPosition: index, onChange: (event_index) => {
                        this.$refs.van_swiper.swipeTo(event_index);

                    }
                });
            },

        },
    }
</script>
<style>
    .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
    }

    .good-img-item {
        height: 70vw;
    }

    .info-div {
        padding: 15px;
    }

    .info-div {
        padding: 15px;
    }

    .table-params {
        font-size: 16px;
    }

    .table-params td {
        padding: 6px 0;
    }

    .card-group {
        padding: 10px;
        font-size: 20px;
    }
</style>